const install = function (Vue) {
  Vue.directive("elementDrag", {
    inserted(el, binding, vnode, oldVnode) {
      el.style.position = "fixed";
      el.style.top = binding.value?.top || "unset";
      el.style.bottom = binding.value?.bottom || "unset";
      el.style.left = binding.value?.left || "unset";
      el.style.right = binding.value?.right || "unset";
      el.style.zIndex = binding.value?.zIndex || "2000";

      let translateX = 0;
      let translateY = 0;

      window.onresize = function (e) {
        if (translateX < -el.offsetLeft) {
          translateX = -el.offsetLeft;
        } else if (
          translateX >
          document.documentElement.offsetWidth - el.offsetLeft - el.offsetWidth
        ) {
          translateX =
            document.documentElement.offsetWidth - el.offsetLeft - el.offsetWidth;
        }
        if (translateY < -el.offsetTop) {
          translateY = -el.offsetTop;
        } else if (
          translateY >
          document.documentElement.offsetHeight - el.offsetTop - el.offsetHeight
        ) {
          translateY =
            document.documentElement.offsetHeight - el.offsetTop - el.offsetHeight;
        }
        el.style.transform = `translate(${translateX}px, ${translateY}px)`;
      };

      el.onmousedown = (e) => {
        document.body.userSelect = "unset";
        el.dragFlag = false;
        e.preventDefault();
        e.stopPropagation();

        // 鼠标按下，计算当前元素距离可视区的距离
        const startX = e.clientX;
        const startY = e.clientY;

        let disX = 0;
        let disY = 0;
        let reslutX = 0;
        let reslutY = 0;
        document.onmousemove = function (e1) {
          document.body.userSelect = "none";
          el.style.cursor = "move";

          el.dragFlag = true;
          e1.preventDefault();
          e1.stopPropagation();
          // 通过事件委托，计算移动的距离
          disX = e1.clientX - startX;
          disY = e1.clientY - startY;

          // 移动当前元素
          reslutX = translateX + disX;
          reslutY = translateY + disY;
          if (reslutX < -el.offsetLeft) {
            reslutX = -el.offsetLeft;
          } else if (
            reslutX >
            document.documentElement.offsetWidth - el.offsetLeft - el.offsetWidth
          ) {
            reslutX =
              document.documentElement.offsetWidth - el.offsetLeft - el.offsetWidth;
          }
          if (reslutY < -el.offsetTop) {
            reslutY = -el.offsetTop;
          } else if (
            reslutY >
            document.documentElement.offsetHeight - el.offsetTop - el.offsetHeight
          ) {
            reslutY =
              document.documentElement.offsetHeight - el.offsetTop - el.offsetHeight;
          }
          el.style.transform = `translate(${reslutX}px, ${reslutY}px)`;
        };

        document.onmouseup = function (e2) {
          document.body.userSelect = "unset";
          el.style.cursor = "unset";

          e2.preventDefault();
          e2.stopPropagation();
          if (el.dragFlag == true) {
            translateX = reslutX;
            translateY = reslutY;
          }
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };

      el.addEventListener("touchstart", (e) => {
        document.body.userSelect = "unset";
        el.dragFlag = false;

        // 鼠标按下，计算当前元素距离可视区的距离
        const startX = e.touches[0].pageX;
        const startY = e.touches[0].pageY;

        let disX = 0;
        let disY = 0;
        let reslutX = 0;
        let reslutY = 0;
        document.addEventListener("touchmove", handleTouchmove, {passive: false});

        document.addEventListener("touchend", handleTouchend);

        function handleTouchmove(e1) {
          if (
            e1.touches[0].pageX >= document.documentElement.offsetWidth ||
            e1.touches[0].pageY >= document.documentElement.offsetHeight ||
            e1.touches[0].pageX <= 0 ||
            e1.touches[0].pageY <= 0
          ) {
            handleTouchend();
            return;
          }

          document.body.userSelect = "none";
          el.dragFlag = true;
          // 通过事件委托，计算移动的距离
          disX = e1.touches[0].pageX - startX;
          disY = e1.touches[0].pageY - startY;

          // 移动当前元素
          reslutX = translateX + disX;
          reslutY = translateY + disY;
          if (reslutX < -el.offsetLeft) {
            reslutX = -el.offsetLeft;
          } else if (
            reslutX >
            document.documentElement.offsetWidth - el.offsetLeft - el.offsetWidth
          ) {
            reslutX =
              document.documentElement.offsetWidth - el.offsetLeft - el.offsetWidth;
          }
          if (reslutY < -el.offsetTop) {
            reslutY = -el.offsetTop;
          } else if (
            reslutY >
            document.documentElement.offsetHeight - el.offsetTop - el.offsetHeight
          ) {
            reslutY =
              document.documentElement.offsetHeight - el.offsetTop - el.offsetHeight;
          }
          el.style.transform = `translate(${reslutX}px, ${reslutY}px)`;
        }

        function handleTouchend(e2) {
          document.body.userSelect = "unset";
          if (el.dragFlag == true) {
            translateX = reslutX;
            translateY = reslutY;
          }
          document.removeEventListener("touchmove", handleTouchmove);
          document.removeEventListener("touchend", handleTouchend);
        }
      }, {passive: false});
    },
  });
};

export default install;
